<template>
	<view class="order">
		<!-- 时间 - 订单状态 -->
		<view class="time-state">
			<view class="time">{{order.time}}</view>
			<view class="state">{{order.stateText}}</view>
		</view>
		<!-- 订单列表 -->
		<view class="list-order">
			<view class="item-order" v-for="(item, index) in order.list" :key='index'>
				<!-- 图片 -->
				<view class="img">
					<image mode="aspectFit" :src="item.url"></image>
				</view>
				<!-- 订单信息 -->
				<view class="info">
					<view class="name-price">
						<view class="name">{{item.name}}</view>
						<view class="price">
							<text class="icon rmb">￥</text>
							{{item.price}}
						</view>
					</view>
					<view class="spec-num">
						<view class="spec">{{item.spec}}</view>
						<view class="num">
							<text class="icon fuhao">X</text>
							{{item.number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 总数 -->
		<view class="total">
			共{{order.totalNum}}件商品 应付金额：
			<view class="total-price">
				<text>￥</text>
				{{order.totalPrice}}
			</view>
		</view>
		<!-- 按钮组 -->
		<view class="buttons">
			<view @click="onClick('clone')" class="clone" v-show="order.state == 1">取消订单</view>
			<view @click="onClick('remove')" class="remove" v-show="order.state == 3">删除订单</view>
			<view @click="onClick('update')" class="update" v-show='order.state == 1'>修改信息</view>
			<view @click="onClick('payment')" class="payment" v-show='order.state == 1'>立即付款</view>
			<view @click="onClick('info')" class="info" v-show='order.state == 2'>查看信息</view>
			<view @click="onClick('evaluate')" class="evaluate" v-show='order.state == 3'>评价晒单</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			order: {
				type: Object
			},
			index: {
				type: Number
			}
		},
		methods: {
			onClick(type){
				this.$emit('onClick', {
					type,
					index: this.index,
					order: this.order
				})
			}
		}
	}
</script>

<style lang="scss">
.order{
	margin-bottom: 15rpx;
	background: $bg-white;
	// 时间 - 订单状态
	.time-state{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		.time{
			font-size: 12px;
			color: $shallow-font;
		}
		.state{
			color: $stop-color;
			font-size: 28rpx;
		}
	}
	// 订单列表
	.list-order{
		padding: 0 20rpx;
		position: relative;
		border: 1px solid $shallow-border;
		border-left: none;
		border-right: none;
		&:before{
			position: absolute;
			right: 30rpx;
			bottom: 0;
			display: block;
			content: '';
			border: 10rpx solid transparent;
			border-bottom-color: $shallow-border;
		}
	}
	// 列表项
	.item-order{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid $shallow-border;
		&:last-child{
			border-bottom: none;
		}
		.img{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			width: 100rpx;
			height: 100rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info{
			width: 100%;
			.name-price{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				.price{
					position: relative;
					color: $shallow-font;
				}
			}
			.spec-num{
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				color: $shallow-font;
				margin-top: 10rpx;
				.num{
					position: relative;
				}
			}
			.icon{
				position: absolute;
				&.rmb{
					font-size: 8px;
					/* #ifndef H5 */
					top: 4rpx;
					left: -15rpx;
					/* #endif */
					
					/* #ifdef H5 */
					left: -18rpx;
					top: -4rpx;
					transform: scale(.7);
					/* #endif */
				}
				&.fuhao{
					font-size: 8px;
					/* #ifndef H5*/
					left: -12rpx;
					top: 8rpx;
					/* #endif */
					/* #ifdef H5 */
					left: -16rpx;
					transform: scale(.7);
					/* #endif */
				}
			}
		}
	}
	// 总金额
	.total{
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: flex-end;
		.total-price{
			font-size: 32rpx;
			color: $shallow-font;
			text{
				display: inline-block;
				font-size: 10px;
				transform: translateY(-8rpx);
				/* #ifdef H5 */
				transform: translateY(-8rpx) scale(.8);
				/* #endif */
			}
		}
	}
	// 按钮组
	.buttons{
		display: flex;
		justify-content: flex-end;
		font-size: 12px;
		padding: 20rpx;
		view{
			padding: 10rpx 20rpx;
			border: 1px solid $stop-color;
			color: $stop-color;
			margin-left: 10rpx;
			border-radius: 10rpx;
		}
		.clone,.remove{
			color: $shallow-font;
			border-color: $shallow-border;
		}
	}
}
</style>
